<template>
    <!-- offer跟进 -->
    update
    <div style="width: 100%; box-shadow: var(--el-border-color-light) 0px 0px 10px">
        <el-splitter>
            <el-splitter-panel :size="'80%'" style="height: 900px; padding: 10px;">
                <div class="demo-panel">
                    <el-row :gutter="24">


                        <el-col :span="24">
                            <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                                <el-form-item label="offer基本信息" label-position="top"
                                    :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                    <div class="progress-bar">
                                        <div class="progress"></div>
                                    </div>
                                </el-form-item>

                            </div>
                        </el-col>


                        <!--  -->
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <el-form-item label="选择offer池" label-position="top">
                                    <el-button type="primary" style="width: 260px;"
                                        @click="JobPopUpWindow"><icon-storage />{{
                                            CandidateName }}</el-button>
                                </el-form-item>
                            </div>
                        </el-col>

                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="所属需求编号"
                                    label-position="top" required>
                                    <el-input v-model="ResumeRequirements" style="width: 260px;" clearable disabled />
                                </el-form-item>
                            </div>
                        </el-col>

                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="简历信息" label-position="top"
                                    required>
                                    <div class="el-form-item__content">

                                        <el-input v-model="TalentResumeID" style="width: 260px" disabled />
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <el-form-item label="招聘负责人" label-position="top">
                                    <el-button size="small" style="width: 260px;" ref="buttonRef"
                                        v-click-outside="onClickOutside"><el-icon>
                                            <UserFilled />
                                        </el-icon>早濑优香</el-button>
                                    <el-popover ref="popoverRef" :virtual-ref="buttonRef" trigger="click" title="早濑优香"
                                        virtual-triggering>
                                        <hr>
                                        <span> 部门：人事部 </span><br>
                                        <span> 手机:1008611 </span>
                                    </el-popover>

                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="发放时间" label-position="top"
                                    required>
                                    <div class="el-form-item__content">
                                        <el-date-picker v-model="DistributionTime" type="datetime" placeholder="选择日期时间"
                                            format="YYYY/MM/DD HH:mm:ss" style="width: 260px;">
                                        </el-date-picker>
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="候选人姓名"
                                    label-position="top" required>
                                    <div class="el-form-item__content">

                                        <el-input v-model="CandidateName" style="width: 260px" disabled />
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="offer岗位"
                                    label-position="top" required>
                                    <div class="el-form-item__content">

                                        <el-input v-model="Position" style="width: 260px" disabled />
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="入职部门" label-position="top"
                                    required>
                                    <div class="el-form-item__content">
                                        <el-input v-model="OnboardingDepartment" style="width: 260px" disabled />
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="手机号" label-position="top"
                                    required>
                                    <div class="el-form-item__content">

                                        <el-input v-model="CellPhone" style="width: 260px" clearable />
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="邮箱" label-position="top"
                                    required>
                                    <div class="el-form-item__content">

                                        <el-input v-model="Mailbox" style="width: 260px" clearable />
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="试用期薪酬（元）"
                                    label-position="top" required>
                                    <div class="el-form-item__content">

                                        <el-input v-model="ProbationarySalary" style="width: 260px" clearable />
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="转正薪酬（元）"
                                    label-position="top" required>
                                    <div class="el-form-item__content">

                                        <el-input v-model="Salary" style="width: 260px" clearable />
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="报到日期" label-position="top"
                                    required>
                                    <div class="el-form-item__content">
                                        <el-date-picker v-model="ReportedDate" type="datetime" placeholder="选择日期时间"
                                            format="YYYY/MM/DD HH:mm:ss" style="width: 260px;">
                                        </el-date-picker>
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple-light"><el-form-item label="报道地址报道地址"
                                    label-position="top" required>
                                    <div class="el-form-item__content">
                                        <el-input v-model="ReportingAddress" style="width: 260px;" clearable></el-input>

                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="24">
                            <div class="grid-content ep-bg-purple-light" style="padding: 15px 0;">
                                <el-form-item label="跟进结果" label-position="top"
                                    :style="{ fontSize: '15px', fontWeight: 'bold', borderBottom: '1px dashed #e4e7ed' }">
                                    <div class="progress-bar">
                                        <div class="progress"></div>
                                    </div>
                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="8">
                            <div class="grid-content ep-bg-purple">
                                <el-form-item label="offer状态" label-position="top">
                                    <el-select v-model="OfferStatus" placeholder="选择状态" style="width: 260px">
                                    <template #label="{ label, value }">
                                        <span style="font-weight: bold">{{ label }}</span>
                                    </template>
                                    <el-option v-for="item in OfferStatusData" :key="item.value" :label="item.label"
                                        :value="item.value" />
                                </el-select>
                                </el-form-item>
                            </div>
                        </el-col>
                        <!--  -->
                        <el-col :span="24">
                            <hr>
                            <div class="grid-content ep-bg-purple-light"><el-descriptions title="" :column="2"
                                    direction="horizontal">
                                    <el-descriptions-item label="提交人："> <el-text class="mx-1"
                                            type="primary">早濑优香</el-text></el-descriptions-item>
                                    <el-descriptions-item label="提交时间：">2025年7月4日16:00:45</el-descriptions-item>
                                    <el-descriptions-item label="更新时间："
                                        :span="2">2025年7月4日16:00:45</el-descriptions-item>
                                </el-descriptions>
                            </div>
                        </el-col>
                    </el-row>
                </div>

            </el-splitter-panel>
            <!--  -->
            <el-splitter-panel :max="260">
                <div class="demo-panel" style="padding: 6px;">
                    <el-tabs v-model="DefaultDataComments" tab-position="top" @tab-click="DataComment">
                        <el-tab-pane label="数据日志" name="first">
                            <div class="card-container">
                                <el-card style="width: 250px;">
                                    <el-row :gutter="24">
                                        <el-col :span="12"></el-col>
                                        <el-col :span="12" style="font-size: 10px;">2025-07-09 09:45</el-col>
                                        <el-col :span="12" style="font-size: 12px;">早濑优香</el-col>
                                        <el-col :span="12" style="font-size: 12px;">修改</el-col>
                                        <el-col :span="12" style="font-size: 12px;"><el-icon>
                                                <Tickets />
                                            </el-icon>简历状态：</el-col>
                                        <el-col :span="12" style="font-size: 12px;"></el-col>
                                        <el-col :span="12" style="font-size: 12px;"><el-button type="danger"
                                                size="small" plain round
                                                class="line-through-btn">修改</el-button></el-col>
                                        <el-col :span="12" style="font-size: 12px;"></el-col>
                                        <el-col :span="12" style="font-size: 12px;"><el-button type="success"
                                                size="small" plain round
                                                class="line-through-btn">修改</el-button></el-col>

                                    </el-row>

                                </el-card>
                            </div>
                        </el-tab-pane>
                        <el-tab-pane label="评论" name="second">
                            <div style="height: 800px; position: relative;"> <!-- 父级设置相对定位 -->
                                <el-empty style="
                                    position: absolute; /* 子元素绝对定位 */
                                    top: 50%;          /* 垂直方向距离顶部50% */
                                    left: 50%;         /* 水平方向距离左侧50% */
                                    transform: translate(-50%, -50%); /* 向左、向上偏移自身50%，实现精准居中 */
                                    " />
                            </div>
                            <div style="display: flex; justify-content: center; width: 100%;">
                                <el-input placeholder="留下你的精彩评论吧(Ctrl+Enter：发送)" clearable
                                    style="width: 250px; font-size: 12px;" />
                            </div>
                        </el-tab-pane>
                    </el-tabs>

                </div>
            </el-splitter-panel>
        </el-splitter>
    </div>
    <!--  -->
    <el-dialog title="选择数据" v-model="IntentionDisplay" width="60%" destroy-on-close>

        <el-table :data="IntentionData" border>
            <!-- 单选列 -->
            <el-table-column label="选择" width="60" fixed="left">
                <template #default="scope">
                    <el-radio v-model="selectedRowId" :label="scope.row.id">
                        <span class="radio-custom"></span>
                    </el-radio>
                </template>
            </el-table-column>
            <!-- 固定岗位名称列 -->
            <el-table-column prop="ResumeRequirements" label="需求编号" width="120" fixed="left" />
            <el-table-column v-for="col in columns" :prop="col.id" :key="col.id" :label="col.label" :width="col.width">
            </el-table-column>
        </el-table>

        <span>
            <el-button @click="IntentionToCancel">取消</el-button>
            <el-button type="primary" @click="IntentionConfirmed">确认</el-button>
        </span>
    </el-dialog>

</template>
<script setup lang="ts">
import { ref, unref } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import { ElMessage, ElMessageBox } from 'element-plus'
import { ClickOutside as vClickOutside } from 'element-plus'


const buttonRef = ref()
const popoverRef = ref()
const DefaultDataComments = ref('first')//数据评论默认值 



// 点击外部关闭
const onClickOutside = () => {
    unref(popoverRef).popperRef?.delayHide?.()
    console.log("点击了");
}



const DataComment = (tab: TabsPaneContext, event: Event) => {
    console.log(tab, event)
}

const IntentionDisplay = ref(false)
// offer池弹窗
const JobPopUpWindow = () => {
    IntentionDisplay.value = true
}
const selectedRowId = ref(null) // 保存当前选中行
const DistributionTime = ref("")//发放时间
const CandidateName = ref("") // 姓名
const ResumeRequirements = ref('') // 需求
const TalentResumeID = ref("") //简历编号
const CellPhone = ref("")//手机号
const Mailbox = ref("") // 邮箱
const Position = ref("") //岗位
const OnboardingDepartment = ref("") //部门
const Salary = ref("") // 薪资
const ProbationarySalary = ref("") // 试用期薪资
const ReportedDate = ref("")    //报到时间
const ReportingAddress = ref(" ") //报到地址
const OfferStatus = ref() // Offer数据


const IntentionData = ref([
    { id: 1, ResumeRequirements: 'JL0001', DistributionTime: '2025-07-08', ReportedDate: '2025-07-09', ReportingAddress: '湖南省/株洲市/荷塘区/和泰路', Salary: '8000', ProbationarySalary: '5000', TalentResumeID: 'JL0001', OfferStatus: '待发offer', Position: '程序员', OnboardingDepartment: '开发部门', CandidateName: '结成明日奈', CellPhone: '1008611', Mailbox: '1246@qq.com' },
    { id: 2, ResumeRequirements: 'JL0002', DistributionTime: '2025-07-08', ReportedDate: '2025-07-09', ReportingAddress: '湖南省/株洲市/荷塘区/和泰路', Salary: '8000', ProbationarySalary: '5000', TalentResumeID: 'JL0002', OfferStatus: '待发offer', Position: '程序员', OnboardingDepartment: '开发部门', CandidateName: '神刀夜十香', CellPhone: '1008611', Mailbox: '1246@qq.com' },


])// 选择简历数据
const columns = [
    { id: "OfferStatus", label: 'offer状态', width: '160' },
    { id: "CandidateName", label: '姓名', width: '160' },
    { id: "Position", label: '岗位', width: '160' },
    { id: "OnboardingDepartment", label: '部门', width: '160' },
    { id: "CellPhone", label: '手机', width: '160' },
    { id: "Mailbox", label: '邮箱', width: '160' },

]
// offer池弹窗确定s确定
const IntentionConfirmed = () => {
    const selectedRow = IntentionData.value.find(row => row.id === selectedRowId.value);
    if (selectedRow) {
        console.log('选中的数据:', selectedRow);
        ResumeRequirements.value = selectedRow.ResumeRequirements;//需求编号
        TalentResumeID.value = selectedRow.TalentResumeID; //简历编号
        DistributionTime.value = selectedRow.DistributionTime;//发放时间
        CandidateName.value = selectedRow.CandidateName; // 姓名
        CellPhone.value = selectedRow.CellPhone; // 手机号
        Mailbox.value = selectedRow.Mailbox; // 邮箱
        Position.value = selectedRow.Position;// 职位
        OnboardingDepartment.value = selectedRow.OnboardingDepartment;//部门
        Salary.value = selectedRow.Salary; // 薪资
        ProbationarySalary.value = selectedRow.ProbationarySalary;//试用期薪资
        ReportedDate.value = selectedRow.ReportedDate; //报到时间
        ReportingAddress.value = selectedRow.ReportingAddress;//报到地址
        OfferStatus.value = selectedRow.OfferStatus; // offer数据

    } else {

        ElMessage.error('未找到匹配的行');
    }

    IntentionDisplay.value = false
}
// offer池弹窗取消
const IntentionToCancel = () => {
    IntentionDisplay.value = false
}
const OfferStatusData = ref([
    { value: '已入职', label: '已入职' },
    { value: '拒绝offer', label: '拒绝offer' },
    { value: '待入职', label: '待入职' }
])
</script>

<style scoped>
/* 外层容器，可控制整体条的高度、圆角等 */
.progress-bar {
    height: 6px;
    background-color: #ccebf7;
    border-radius: 3px;
    display: flex;
    width: 100%;
    /* 确保进度条容器宽度占满父容器 */
    overflow: hidden;
    /* 防止子元素溢出 */
}

.progress {
    width: 8%;
    height: 10;
    background-color: #61c3ea;
    border-radius: 3px 0 0 3px;
    transition: width 0.3s ease;
    /* 添加宽度变化的过渡效果 */
}



/* 单选框选中样式 */
.el-radio.is-checked .radio-custom {
    background-color: #61c3ea;
    border-color: #409EFF;
}

.card-container {
    display: flex;
    /* 卡片排列方式 */
    flex-wrap: wrap;
    /* 卡片之间的间距 */
    justify-content: center;
    /* 居中 */
}

/* 删除按钮样式 */
.line-through-btn {
    text-decoration: line-through;
}
</style>
